<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 500px;
            height: 200px;
            border-collapse: collapse;
        }

        table,
        th,
        td {
            border: 1px solid;
        }

        th,
        td {
            text-align: center;
        }

        .operate {
            display: flex;
            align-items: center;
            justify-content: space-around;
        }

        input {
            width: 20px;
            height: 20px;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th>id</th>
            <th>商品</th>
            <th>单价</th>
            <th>操作</th>
            <th>总价</th>
        </tr>
        <tr>
            <td>1</td>
            <td>苹果</td>
            <td>5</td>
            <td class="operate">
                <input type="button" value="-">
                <p>0</p>
                <input type="button" value="+">
            </td>
            <td>
                <h3>0</h3>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>桃子</td>
            <td>6</td>
            <td class="operate">
                <input type="button" value="-">
                <p>0</p>
                <input type="button" value="+">
            </td>
            <td>
                <h3>0</h3>
            </td>
        </tr>
        <tr>
            <td>1</td>
            <td>香蕉</td>
            <td>3</td>
            <td class="operate">
                <input type="button" value="-">
                <p>0</p>
                <input type="button" value="+">
            </td>
            <td>
                <h3>0</h3>
            </td>
        </tr>
    </table>
    <script>
        let table = document.querySelector('table')

        let h3 = document.querySelectorAll('#td');
        let i = 0;
        console.log(h3);

        table.onclick = function (event) {
            if (event.target.value == '+') {
                console.log(event.target);
                event.target.previousElementSibling.innerText++;
                let j = event.target.parentElement.previousElementSibling;
                let i = event.target.parentElement.nextElementSibling;
                i.innerText = j.innerText * event.target.previousElementSibling.innerText

            }
            if (event.target.value == '-') {
                console.log(event.target);
                if (event.target.nextElementSibling.innerText > 0) {
                    event.target.nextElementSibling.innerText--;
                    let z = event.target.parentElement.previousElementSibling;
                    let h = event.target.parentElement.nextElementSibling;
                    h.innerText = z.innerText * event.target.nextElementSibling.innerText
                }

            }
        }
    </script>
</body>

</html>